<template>
	<uni-popup ref="userCardPopup" type="center">
		<view class="w-user-card">
			<avatar class="w-avatar" :src="userDetail.avatar" :name="userDetail.username" :size="55" :showName="false"></avatar>
			<view>
				<text style="margin-right: 10px;">{{userDetail.username}}</text>
				<uni-tag type="warning" size="mini" :text="role" inverted v-for="(role, i) in (userDetail.roles || [])"
					:key="`r${i}`"></uni-tag>
			</view>
			<uni-icons class="w-xicon" type="closeempty" color="#A2A2A2" :size="20" @click="hide"></uni-icons>
			<uni-list class="w-user-info">
				<uni-list-item :title="$t('flow.department')" :rightText="userDept" show-extra-icon :extra-icon="{type: 'home'}" />
				<uni-list-item :title="$t('flow.on-boardTime')" :rightText="userDetail.entryDate" show-extra-icon
					:extra-icon="{type: 'calendar'}" />
				<uni-list-item :title="$t('webAuto.Gender')" :rightText="userDetail.sex ? $t('webAuto.male'):$t('webAuto.female')" show-extra-icon
					:extra-icon="{type: 'staff'}" />
				<uni-list-item :title="$t('webAuto.phone')" @click="call(userDetail.phoneNumber)" show-extra-icon :rightText="userDetail.phoneNumber" clickable
					show-arrow :extra-icon="{type: 'phone'}" />
			</uni-list>
		</view>

	</uni-popup>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { getUserDetail } from '@/api/org.js'
	import Avatar from '@/components/Avatar.vue'
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

	const props = defineProps(['userId'])
	const userDetail = ref({})
	const userCardPopup = ref()
	const userDept = computed(() => {
		return (userDetail.value.depts || []).length === 0 ? t('webAuto.NoDepartment') : userDetail.value.depts.join('、')
	})

	function show(userId) {
		getUserDetail(userId).then(rsp => {
			userDetail.value = rsp.data
			userCardPopup.value.open('center')
		})
	}

	function hide() {
		userCardPopup.value.close()
	}

	function call(mobile) {
		uni.makePhoneCall({
			phoneNumber: mobile
		});
	}

	defineExpose({ show, hide })
</script>

<style lang="less" scoped>
	.w-user-card {
		background-color: white;
		border-radius: 8px;
		padding: 32rpx;
		position: relative;

		.w-avatar {
			border-radius: 50%;
			//box-shadow: 0 0 6px 0px #c8c8c8;
			position: absolute;
			padding: 7px;
			background-color: white;
			top: -21px;
			left: 0px;
		}

		&>view:nth-child(2) {
			margin-left: 70px;
			/* #ifdef MP-WEIXIN */
			margin-bottom: 20px;
			/* #endif */
		}

		&>view:nth-child(2):first-child {
			margin-right: 10px;
		}

		.w-xicon {
			background-color: white;
			border-radius: 50%;
			position: absolute;
			right: -5px;
			top: -8px;
			padding: 2px;
		}

		.w-user-info {
			margin-top: 30px;
			width: 70vw;

			.uni-list-item__container {
				padding: 12px 0;
			}
		}
	}
</style>